<template>
  <var-card 
    title="Book a Class / Facility"
    subtitle="Let's start your day"
    :class="'title'"
  >
  <template #description>
    <el-select v-model="value" filterable placeholder="Select" @change="showType">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </template>
</var-card>
  <div class="input-group" style="margin-bottom: 10px">
      <el-input v-if="select == ''"
        disabled
        v-model="searchInput"
        placeholder="Please input"
        class="input-with-select"
      >
        <template #prepend>
          <el-select v-model="select" placeholder="Key" style="">
            <el-option label="Name" value="1" />
            <el-option label="Postion" value="2" />
            <el-option label="Time" value="3"/>
          </el-select>
        </template>
        <template #suffix>
          <span class="input-group-text text-body" @click="searchBy">
            <el-icon class="el-input__icon"><search /></el-icon>
          </span>
        </template>
      </el-input>
      <el-input v-else-if="select != 3"
        v-model="searchInput"
        placeholder="Please input"
        class="input-with-select"
      >
        <template #prepend>
          <el-select v-model="select" placeholder="Type" style="">
            <el-option label="Name" value="1" />
            <el-option label="Postion" value="2" />
            <el-option label="Time" value="3" />
          </el-select>
        </template>
        <template #suffix>
          <span class="input-group-text text-body" @click="searchBy">
            <el-icon class="el-input__icon"><search /></el-icon>
          </span>
        </template>
      </el-input>
      <div v-else-if="select == 3"
        class="input-with-select"
        style="display:flex;
    align-items:center;
    justify-content:center;"
      >
        <el-select v-model="select" placeholder="Search type" style="width: 2.2em;">
            <el-option label="Name" value="1" />
            <el-option label="Postion" value="2" />
            <el-option label="Time" value="3" />
        </el-select>
        <el-select v-model="dateSelect" style="width: 3.5em;">
          <el-option v-for="date in date_list" :key="date" :value="date" :label="date" />
        </el-select>
        <el-select v-model="timeSelect" style="width: 3.2em;">
          <el-option v-for="time in time_select_list" :key="time" :value="time" :label="time" />
        </el-select>
        <div class="el-input__wrapper"  style="width: 0.11em; box-shadow: none;"><el-icon @click="searchBy" class="el-input__icon" style="width: 0.4em;"><search /></el-icon></div>
      </div>
    </div>
    <var-card 
      v-show="(select == 3)"
      v-for="(item, itemIndex) in timeSearchList"
      :key="item"
      ripple
      layout="row"
      :src="'https://fitzone.work/img/'+item.img"
      v-model:floating="floating"
      @click="floating = true"
      :elevation="0"
      :title=item.f_name
      :description="'$'+item.price"
      :subtitle="item.location"
      style="margin-bottom: 15px;margin-top: 15px;"
    >
      <template #extra>
        <var-button type="success" block @click="searchByTimeBook(itemIndex,item.f_name)">Book</var-button>
      </template>
    </var-card>
  <var-tabs
    elevation
    color="linear-gradient(90deg, rgba(72,176,221,1) 0%, rgba(0,208,161,1) 100%)"
    active-color="#fff"
    inactive-color="hsla(0, 0%, 100%, .6)"
    v-model:active="active"
  >
    <var-tab v-for="date in date_list" :key="date" >{{ date }}</var-tab>
  </var-tabs>
  <var-tabs-items v-model:active="active">
      <var-tab-item v-for="(date, dateIndex) in date_list" :key="date">
        <var-card 
          v-for="(item, itemIndex) in facilityList"
          :key="item"
          ripple
          layout="row"
          :src="'https://fitzone.work/img/'+item.img"
          v-model:floating="floating"
          @click="floating = true"
          :elevation="0"
          :title=item.f_name
          :description="'$'+item.price"
          :subtitle="item.location"
          style="margin-bottom: 15px;margin-top: 15px;"
        >
          <template #extra>
            <var-button type="success" block @click="picker(itemIndex,dateIndex,time_list,facilityList,date_list)">Book</var-button>
          </template>
        </var-card>
        <var-skeleton
          title
          avatar
          :rows="3"
          :loading="loading"
          v-for="index in 6"
          :key="index"
        >
        </var-skeleton>
      </var-tab-item>
  </var-tabs-items>
  
</template>

<script>
import axios from 'axios';
import { Calendar, Search } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user';
import { getToken, setToken } from '@/utils/auth';
const userStore = useUserStore();
const value = ref(-1)
const options = [
  {
    value: 0,
    label: 'Class',
  },
  {
    value: 1,
    label: 'Facility',
  },
  {
    value: -1,
    label: 'All',
  },
]
export default {
  data(){
    return{
      date_list:[],
      time_list:[],
      facilityList:[],
      buttonList:[],
      searchInput:'',
      searchChartFlag:0,
      search_list:[],
      timeSearchList:[],
      time_select_list:[
        '9:00-10:00',
        '10:00-11:00',
        '11:00-12:00',
        '12:00-13:00',
        '13:00-14:00',
        '14:00-15:00',
        '15:00-16:00',
        '16:00-17:00',
        '17:00-18:00',
        '18:00-19:00'
      ],
      first_date:'',
      select:'',
      timeSelect:'',
      dateSelect:'',
    }
  },
  methods:{
    logActive(){
      console.log("active is:"+ active.value)
    },
    searchBy(){
      let searchUrl = ''
      if(this.select == "1"){
        searchUrl = 'https://fitzone.work:8080/search_by_name'
      }
      else if(this.select == "2"){
        searchUrl = 'https://fitzone.work:8080/search_by_location'
      }
      else if(this.select == "3"){
        searchUrl = "https://fitzone.work:8080/search_by_time"
      }
      axios({
        method:'get',
        baseURL: searchUrl,
        params:{
          name:this.searchInput,
          location:this.searchInput,
          date:this.dateSelect,
          time:this.timeSelect,
        }
      }).then(res =>{
        console.log(res)
        console.log(this.searchInput)
        if(this.select == "3"){
          this.timeSearchList = res.data
          console.log(res.data)
        }
        else{
          this.facilityList = res.data
        }
      }).catch(err =>{
        console.log(err)
      }) 
      this.searchChartFlag = 1
    },
    searchByTimeBook(id,f_name){
      axios({
        method:'get',
        baseURL: 'https://fitzone.work:8080/add_order',
        params:{
            user_name:userStore.nickName,
            f_name:f_name,
            date:this.dateSelect,
            detail_time:this.timeSelect,
            type:0,
        }
      }).then(res => {

        Dialog({
          title: '',
          message: 'Successfully Book!',
          cancelButton:false,
          confirmButtonText:'confirm',
        })
        console.log(res.data)
        if(!res.data){
          alert("The time you choose is unavailable!")
        }
      }).catch(err => {
        console.log(err)
      })
    },
    showType(){
    console.log(value.value)
    if(value.value != -1){
        axios({
          method:'GET',
          baseURL:'https://fitzone.work:8080/search_class',
          params:{
            type: value.value
          }
        }).then(res=>{
          this.facilityList = res.data
        })
      }
      else{
        axios
    .get('https://fitzone.work:8080/all')
    .then(res =>{
      console.log(res.data);
      this.facilityList = res.data
      console.log(this.facilityList)
      this.loading = false;
      console.log(this.loading)
    })
    .catch(err =>{
      console.error(err);
    })
      }
    }
  },
  mounted(){
    axios
    .get('https://fitzone.work:8080/date')
    .then(res => {
      console.log(res.data)
      this.date_list = res.data
    })
    axios
    .get('https://fitzone.work:8080/detail_time')
    .then(res => {
      console.log(res.data)
      this.time_list = res.data
    })
    axios
    .get('https://fitzone.work:8080/all')
    .then(res =>{
      console.log(res.data);
      this.facilityList = res.data
      console.log(this.facilityList)
      this.loading = false;
      console.log(this.loading)
    })
    .catch(err =>{
      console.error(err);
    })
  }
}
</script>
<script setup name="Work">
import { reactive, ref } from 'vue'
import { Snackbar, ActionSheet } from '@varlet/ui'
import { Picker } from '@varlet/ui'
import { useUserStore } from '@/stores/user';
import { Dialog } from '@varlet/ui'
//0 class 1 facility
const active = ref(0)

let date =''
let facility = ''
let time = ''
let timeList = []
let userdata = []

async function picker(itemIndex,dateIndex,time_list,facilityList,date_list) {
  let avaliableTimeList = [time_list[itemIndex*7 + dateIndex]]
  console.log(avaliableTimeList)
  avaliableTimeList[0].forEach((time)=>{
    if(time.capacity <= facilityList[itemIndex].capacity){
      console.log(time.time)
      timeList.push(time.time)
    }
  })
  console.log(timeList)
  console.log(timeList.length)
  facility = facilityList[itemIndex]
  date = date_list[dateIndex]
  time = timeList[0]
  if( timeList.length != 0){
    let picker = await Picker({
      columns: [timeList],
      onConfirm: confirmHandler
    })
  }
  else{
      Dialog({
      title: '',
      message: 'Sorry but the booking is full',
      cancelButton:false,
      confirmButtonText:'confirm',
    })
  }
}
function confirmHandler(list){
    //要使用的变量
    console.log(list[0])
    console.log(facility.f_name)
    console.log(date)
    console.log(time)
    axios({
        method:'get',
        baseURL: 'https://fitzone.work:8080/add_order_by_user',
        params:{
            user_name:userStore.nickName,
            f_name:facility.f_name,
            date:date,
            detail_time:list[0],
            type:0,
        }
      }).then(res => {
        if(!res.data){
          alert("The time you choose is unavailable!")
        }else{
          Dialog({
          title: '',
          message: 'Successfully Book!',
          cancelButton:false,
          confirmButtonText:'confirm',
        })
        axios({
        method:'get',
        baseURL: 'https://fitzone.work:8080/recharge',
        params:{
            id:userStore.userId,
            money:0
        }
      }).then(res=>{
        useUserStore().permissions[1]=res.data
        userdata=getToken()
        userdata.balance=res.data
        setToken(userdata)
      })
        }
        
        console.log(res.data)
        
      }).catch(err => {
        console.log(err)
      }) 
}
</script>
<style>
.row-item{
  line-height: var(--card-line-height);
  background: var(--card-background);
  transition: background-color 0.25s, color 0.25s;
  transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);
}
.title{
  --card-background: var(--color-body);
}
.el-input__wrapper,.el-input.is-disabled,.el-input__inner,.el-input.is-disabled .el-input__wrapper{
    background-color: var(--year-picker-item-padding);
  }
  .el-input-group__append, .el-input-group__prepend{
    background-color: var(--year-picker-item-padding);
    color: white;

  }
  .el-input__inner{
    color: white;
  }
</style>